<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="title"
    width="30%"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    @closed="onDialogClosed"
  >
    <div class="dialog-content">
      <div class="dialog-icon" v-if="type">
        <i :class="iconClass"></i>
      </div>
      <div class="dialog-message" v-if="message" v-html="message"></div>
      <slot></slot>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onCancel">{{ cancelText }}</el-button>
      <el-button :type="confirmButtonType" @click="onConfirm" :loading="loading">
        {{ confirmText }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'ConfirmDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '确认操作'
    },
    message: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'warning', // warning, info, error, success
      validator: value => ['warning', 'info', 'error', 'success', ''].includes(value)
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmButtonType: {
      type: String,
      default: 'primary'
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: this.visible
    };
  },
  computed: {
    iconClass() {
      const iconMap = {
        warning: 'el-icon-warning',
        info: 'el-icon-info',
        error: 'el-icon-error',
        success: 'el-icon-success'
      };
      return iconMap[this.type] || '';
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
    }
  },
  methods: {
    onConfirm() {
      this.$emit('confirm');
    },
    onCancel() {
      this.dialogVisible = false;
      this.$emit('cancel');
      this.$emit('update:visible', false);
    },
    onDialogClosed() {
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style scoped>
.dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dialog-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.dialog-icon i.el-icon-warning {
  color: #e6a23c;
}

.dialog-icon i.el-icon-info {
  color: #409eff;
}

.dialog-icon i.el-icon-error {
  color: #f56c6c;
}

.dialog-icon i.el-icon-success {
  color: #67c23a;
}

.dialog-message {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}
</style> 